<template>
  <div>

    <Head />
    <main>
      <div class="top">
        <div class="left">
          <a @click="back" style="color: #007bff">&lt;&nbsp;返回</a>
        </div>
        {{ testInfo.title }}
      </div>
      <div class="content">
        <article>
          <div class="title">
            <p>单选题</p>
            <p>第{{ currentPage + 1 }}题/共{{ testArr.length }}题</p>
          </div>
          <div v-for="(item, index) in testArr" :key="index + 'testArr'"
            v-show="currentPage == index">
            <div class="questions">
              <span>{{ index + 1 }}.</span>
              <p class="question">{{ item.topics }}</p>
            </div>
            <div class="slectAnswer">
              <div class="item" v-for="(optionItem, i) in item.options"
                :key="i + 'option'" @click="addClass(i, index)"
                :class="{ active: testArr[index].studentAnswer === i }">
                <div class="slect A">
                  {{ selectArr[i] }}
                </div>
                <p>{{ optionItem }}</p>
              </div>
            </div>
          </div>
          <button class="btn btn-primary" @click="preExe()"
            v-show="currentPage != 0" style="width: 100px; margin-right: 10px">
            上一题
          </button>
          <button class="btn btn-primary" @click="nextExe()"
            v-show="currentPage != testArr.length - 1" style="width: 100px">
            下一题
          </button>
        </article>
        <aside>
          <div class="msg">
            <div class="time item">
              <span class="syTime">剩余时间：</span>
              <span class="hour">{{ "0" + h }}</span>
              <span>：</span>
              <span class="minute">{{ m }}</span>
              <span>：</span>
              <span class="second">{{ s }}</span>
            </div>
            <div class="testType item">
              <span>考试类型：</span>
              <span class="type"> {{ testInfo.typeId.type }} </span>
            </div>
            <div class="answerCard item">
              <span>答题卡</span>
            </div>
          </div>
          <div class="num">
            <a class="item" v-for="(item, index) in testArr.length"
              :key="index + 'button'" @click="targetTest(index)"
              :class="{ active: index == currentPage }">
              {{ item }}
            </a>
          </div>
          <button class="btn btn-success click-up" data-toggle="modal"
            data-target="#exampleModal">
            交卷确认
          </button>
        </aside>
      </div>
    </main>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1"
      aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <!-- 头 -->
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">交卷</h5>
            <button type="button" class="close" data-dismiss="modal"
              aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <!-- 身体 -->
          <div class="modal-body">
            <p>总题数：{{ testArr.length }}</p>
            <p>已答题：{{ testedNum }}</p>
            <p style="color: red">未答题：{{ testArr.length - testedNum }}</p>
          </div>
          <!-- 尾部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary"
              data-dismiss="modal">
              再检查下
            </button>
            <a class="btn btn-success" data-dismiss="modal"
              @click="commitPage">确认交卷</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../home/Head.vue";
export default {
  components: {
    Head
  },
  data() {
    return {
      testInfo: "",
      testArr: [],
      currentPage: 0,
      selectArr: ["A", "B", "C", "D"],
      isActive: false,
      timer: "",
      h: "",
      m: "",
      s: "",
      time: "",
      score: 0,
      studentAnswer: []
    };
  },
  computed: {
    testedNum() {
      let num = this.testArr.filter((v) => v.studentAnswer >= 0).length;
      return num;
    }
  },
  methods: {
    //返回
    back() {
      history.back();
    },
    preExe() {
      this.currentPage--;
    },
    nextExe() {
      this.currentPage++;
    },
    // 设置样式的同时保存学生选择的数据
    addClass(i, index) {
      // this.$set(this.testArr[index], "showFlag", i);
      // 存入学生答案
      this.testArr[index].studentAnswer = i;
      // this.$set(this.testArr[index], "studentAnswer", i);
      this.studentAnswer[index] = i;
      console.log("学生选项：", i, "题号", index);
    },
    //切换选项卡
    targetTest(i) {
      this.currentPage = i;
    },
    //计算分数
    computedScore() {
      this.testArr.forEach((v) => {
        if (v.studentAnswer == v.answer) this.score += 3;
        else this.saveError(v);
      });
    },
    // 保存已做试题
    tested() {
      this.$http
        .post("/tested/saveTest", {
          score: this.score,
          studentId: this.$store.state.userInfo._id,
          testId: this.testInfo._id,
          total: this.testArr.length * 3,
          stuAnswer: JSON.stringify(this.studentAnswer)
        })
        .then(({ data }) => {
          console.log(data.message);
        });
    },
    // 保存错题
    saveError(obj) {
      this.$http
        .post("/errors/createErrors", {
          studentId: this.$store.state.userInfo._id,
          exerciseId: obj._id,
          errorAnswer: obj.studentAnswer
        })
        .then(({ data }) => {
          console.log(data.message);
        });
    },
    // 交卷
    commitPage() {
      this.computedScore();
      this.tested();
      localStorage.detailPage = JSON.stringify(this.testArr);
      localStorage.score = JSON.stringify(this.score);
      this.$router.push("/stest4");
    }
  },
  beforeMount() {
    this.testInfo = JSON.parse(localStorage.testInfo);
    this.testArr = this.testInfo.exercisesId;
    this.testArr.forEach((v, i) => {
      console.log(v);
      this.studentAnswer[i] = 4;
    });
  },
  mounted() {
    this.time = parseInt(this.testInfo.time) * 60 * 1000;
    this.timer = setInterval(() => {
      this.time -= 1000;
      this.h = Math.floor((this.time / 1000 / 60 / 60) % 24);
      this.m = Math.floor((this.time / 1000 / 60) % 60);
      this.s = Math.floor((this.time / 1000) % 60);
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
// 头部
.header {
  width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  height: 50px;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: space-between;
  .userInfo {
    .img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background-color: blue;
      margin-right: 20px;
    }
    display: flex;
    align-items: center;
  }
}
main {
  width: 1050px;
  margin: 0 auto;
  //   border: 1px solid red;
  // background-color: white;
  margin-top: 36px;
  .top {
    height: 68px;
    background-color: white;
    text-align: center;
    line-height: 68px;
    position: relative;
    color: #333;
    .left {
      //   width: 105px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 20px;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    article {
      flex-grow: 1;
      background-color: white;
      padding: 0 28px;
      overflow-y: scroll;
      .title {
        height: 42px;
        display: flex;
        justify-content: space-between;
        color: #009900;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
      }
      .questions {
        margin-top: 28px;
        display: flex;
        .question {
          margin-bottom: 25px;
        }
      }
      .slectAnswer {
        .item {
          width: 700px;
          display: flex;
          margin-bottom: 25px;
          &.active {
            // background-color: #28a745;
            color: #28a745;
            .slect {
              background-color: #28a745;
              color: white;
            }
          }
          .slect {
            width: 35px;
            height: 35px;
            border-radius: 50% 50%;
            background-color: #f2f2f2;
            text-align: center;
            line-height: 35px;
            margin-right: 10px;
          }
          p {
            line-height: 35px;
          }
        }
      }
    }
    aside {
      width: 285px;
      min-height: 650px;
      .msg {
        .item {
          height: 44px;
          padding: 0 20px;
          background-color: white;
          display: flex;
          align-items: center;
          color: #333;
        }
        .time {
          border-bottom: 1px solid #f2f2f2;
          span {
            color: #ff0000;
          }
          .syTime {
            color: #333;
          }
        }
        .answerCard {
          margin-top: 12px;
          display: flex;
          justify-content: space-between;
        }
      }
      .num {
        min-height: 450px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        .item {
          width: 50px;
          height: 50px;
          margin-top: 10px;
          background-color: white;
          margin-right: 7px;
          text-align: center;
          line-height: 50px;
          box-shadow: 0 0 15px #e4e4e4;
          &.active {
            background-color: #007bff;
            color: white;
          }
        }
        .item:hover {
          background-color: #ccc;
        }
        .item:nth-child(5n) {
          margin-right: 0;
        }
      }
      .submitBtn {
        width: 100%;
        height: 45px;
        background-color: #009900;
        color: white;
        text-align: center;
        line-height: 45px;
      }
      .click-up {
        width: 280px;
        height: 50px;
      }
    }
  }
}
#bg {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
}
.confirm {
  position: absolute;
  width: 500px;
  height: 310px;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
}
</style>
